<template>
	<view class="curriculum">
		<van-tabs :active="active" :border="false" color="#005AAE" @click="getCourseListByTid">
			<van-tab :title="item.pname" v-for="(item,index) in list" :key="index">
				<div class="list">
					<div class="imgs" v-for="(item2,index2) in course" :key="index2">
						<navigator :url="'detailed?id='+item2.courseid" hover-class="none">
							<image :src="item2.url" mode=""></image>
							<div class="info">
								<div>
									<h2>{{item2.pname}}</h2>
									<div><span>{{item2.nowfee}}</span><u v-if="item2.oldfee>0">{{item2.oldfee}}</u></div>
									<!-- <div>已预约：8 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;剩余：27</div> -->
								</div>
								<button type="warn" @tap.stop="yuyue(item2)" class="yuyue">立即预约</button>
							</div>
						</navigator>
					</div>

				</div>
		
			</van-tab>
<!-- 			<van-tab title="分类" >
				<div class="list">
					<div class="text">
						<div>
							<navigator url="detailed?id=1" hover-class="none">订单标题订单标题订单标题订单标题订单标题订单标题</navigator>
							<p>2020-1-1</p>
						</div>
					</div>
				</div>
			</van-tab> -->

		</van-tabs>
		
		
		<quick />
	</view>
</template>

<script>
	import quick from '@/components/quick/index.vue'
	export default {
		components: {
			quick
		},
		data() {
			return {
				active:0,
				list:[],
				course:[]
			};
		},
		onShow() {
			if(uni.getStorageSync('activeIndex')){
				this.active = uni.getStorageSync('activeIndex')
				uni.removeStorageSync('activeIndex');
				this.getCourseTypeList()
			}
			
		},
		mounted() {
			this.getCourseTypeList()
		},
		methods:{
			getCourseTypeList(){
				this.$api('Api/tcc/getCourseTypeList.html').then(res=>{
					this.list=res
					this.getCourseListByTid()
				})
			},
			getCourseListByTid(val){
				var index = 0
				if(val){
					index = val.detail.name
				}else{
					index=this.active
				}
				let id = this.list[index].id
				this.$api('Api/tcc/getCourseListByTid.html',{pid:id}).then(res=>{
					this.course=res
				})
			},
			yuyue(e){
				if(uni.getStorageSync('userInfo')){
					uni.navigateTo({
						url: '../appointment/index?courseid='+e.courseid+'&pname='+e.pname+'&nowfee='+e.nowfee+'&oldfee'+e.oldfee
					})
				}else{
					uni.showToast({
					    title: '请先登录',
					    duration: 2000,
						icon:'none'
					});
					uni.switchTab({
					    url: '../my/index'
					});
				}
				
			}
		}
	}
</script>

<style lang="less" scoped>
	.list{padding: 30rpx 50rpx;
		>div{
			border-bottom: 1rpx solid #ddd;
			padding: 30rpx 0;
			
			&:last-of-type{
				border: none;
			}
		}
	}
	.imgs{
		image{width: 677rpx;height: 363rpx;}
		.info{
			display: flex;
			justify-content: space-between;
			>div{
				flex: 1;
				h2{font-size: 24rpx;color: #666;font-weight: bold;}
				span{display: inline-block;color: #D30000;font-size: 24rpx;font-weight: bold;}
				u{display: inline-block;font-size: 18rpx;color: #666; text-decoration:line-through;margin-left: 30rpx;}
				.iconfont{color: #005AAE;display: inline-block;}
				>div:last-of-type{color: #989898;font-size: 18rpx;}
			}
			.yuyue{
				
				width:233rpx;
				height:70rpx;
				line-height: 70rpx;
				border-radius: 70rpx;
				margin: 0;
				margin-top: 8rpx;
				font-size: 24rpx;
			}
		}
	}
	
	.text{

		navigator{
			font-size: 24rpx;
			color: #666;
			font-weight: bold;
		}
		p{font-size: 18rpx;color: #666;margin-top: 50rpx;}
	}

</style>
